<template>
	<view class="wrap">
		<uni-group title="基本信息" top="0">
			<image v-if="formData.type=='图片'" :src="formData.url" mode="widthFix" style="width: 100%;"></image>
			<video v-if="formData.type=='视频'" :src="formData.url" style="width: 100%;"></video>
			<view class="item">
				<view class="title">文件名:</view>
				<input type="text" v-model="formData.name" placeholder="请输入文件名"></input>
			</view>
			<view class="item">
				<view class="title">文件大小:</view>
				<input  type="text" v-model="formData.size" :disabled="true"></input>
			</view>
			<view class="item">
				<view class="title">文件类型:</view>
				<input  type="text" v-model="formData.type" :disabled="true"></input>
			</view>
			<view class="item">
				<view class="title">文件地址:</view>
				<input  type="text" v-model="formData.url" @click="copy()" :disabled="true"></input>
			</view>
			<view class="item">
				<view class="title">创建日期:</view>
				<input  type="text" v-model="formData.time" :disabled="true"></input>
			</view>
		</uni-group>
		<view class="example">
			<button class="button" @click="download()">下载</button>
		</view>
		<view class="example">
			<button class="button" @click="submitForm('form')">保存修改</button>
		</view>
		<view class="example">
			<button class="button" @click="del()">删除</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {}
			}
		},
		async onLoad(e) {
			this.formData=JSON.parse(e.data)
			//#ifdef H5
			this.formData.time=(new Date(parseInt(this.formData.time))).toLocaleDateString()
			//#endif
			//#ifdef MP
			this.formData.time=(new Date(parseInt(this.formData.time*1000))).toLocaleDateString()
			//#endif
		},
		methods: {
			copy(){
				uni.setClipboardData({
				    data: this.formData.url,
				    success: function () {
				        uni.showToast({
				        	icon:'success',
							title:'复制文件地址成功！'
				        })
				    }
				});
			},
			del(){
				console.log(this.formData)
				this.$api("myfile","del",{ids:[this.formData._id]}).then(res=>{
					uni.showToast({
						icon:'success',
						title:"删除成功"
					})
					setTimeout(()=>{uni.navigateBack()},1000)
				})
				
			},
			download(){
				//#ifdef H5
				var a = document.createElement('a');
				//需要下载的数据内容,我这里放的就是BLOB，如果你有下载链接就不需要了
				a.href = this.formData.url;
				a.download = this.formData.name;
				a.target = '_blank';
				a.click();
				//#endif
				//#ifdef MP
				const downloadTask = uni.downloadFile({
				    url: this.formData.url, //仅为示例，并非真实的资源
				    success: (res) => {
						console.log(res)
						let {tempFilePath,statusCode}=res
				        if (statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: tempFilePath,
								success: () => {
									uni.showToast({
										icon: 'none',
										title: '已保存到手机相册'
									})
								},
								fail: (errMsg) => {
									uni.showToast({
										icon: 'none',
										title: '保存到手机相册失败' + JSON.stringify(errMsg)
									})
								}
							});
				        }
				    }
				});
				
				downloadTask.onProgressUpdate((res) => {
				    console.log('下载进度' + res.progress);
					uni.showToast({
						icon:'loading',
						title:'下载进度' + res.progress+'%'
					})
				});
				//#endif
			},
			submitForm(){
				if(this.formData.name!=null&&this.formData.name!=''){}
				this.$api("myfile","upd",{_id:this.formData._id,name:this.formData.name}).then(res=>{
					uni.showToast({
						icon:'success',
						title:"修改成功"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.item{
		text-align: left;
		color: #333;
		font-size: 14px;
		margin-bottom: 22px;
		background-color: #fff;
		display: flex;
		.title{
			height: 36px;
			width: 60px;
			    line-height: 36px;
			    margin-right: 10px;
		}
		input{
			border: 1px solid #e5e5e5;
			    -webkit-border-radius: 4px;
			    border-radius: 4px;
			width: 100%;
			padding-left: 10px;
			flex: 1;
			height: 36px;
			text-align: left;
			color: #333;
			font-size: 14px;
		}
	}
	
</style>

